<template>
  <div>
    <el-row v-for="(v, i) in articleList" :key="i" class="hot-title-item">
      <div @click="toCommentDetail(v)">
        <el-col :span="2"
          ><div class="index">{{ i + 1 }}</div></el-col
        >
        <el-col :span="16"
          ><div class="title">{{ v.content }}</div></el-col
        >
        <el-col :span="4"
          ><div class="num">{{ v.viewCount }}</div>
        </el-col>
        <el-col :span="2"
          ><div @click="getArticleList">
            <i class="icon-remen iconfont"></i></div
        ></el-col>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  props: ["refreshNum"],
  watch: {
    refreshNum: {
      handler(newVal, oldVal) {
        // 刷新数据
        this.getArticleList();
      },
    },
  },
  data() {
    return {
      queryInfo: {
        // show-按时间 hot-按访问量 like-点赞量 collection-收藏量 null-按照label分类
        type: "hot",
        page: 1,
        limit: 20,
        // 文章分类
        label: -1,
      },
      // 文章列表
      articleList: [],
    };
  },
  created() {
    // 获取文章数据列表
    this.getArticleList();
  },
  methods: {
    // 获取文章列表数据
    async getArticleList() {
      const { code, msg, result } = await this.$http.get("/api/tweet/type", {
        params: this.queryInfo,
      });
      if (code != 200) {
        return this.$showMsg({ msg: "获取文章数据列表失败！", type: "error" });
      }
      this.articleList = result.list;
      // console.log("文章数据", this.articleList);
    },
    // 跳转到评论详情页
    toCommentDetail(item) {
      // 如果用户未登录 不能查看
      if (!localStorage.user_id) {
        return this.$showMsg({ msg: "请先登录!", type: "warning" });
      }
      if (this.$route.path == "/comment" && this.$route.query.id == item.id)
        return;
      console.log("跳转到评论详情页");
      this.$router.push({
        path: "/comment",
        query: {
          id: item.id,
        },
      });
    },
  },
};
</script>

<style scoped lang="less">
.hot-title-item {
  padding: 15px 0;
  border-bottom: 1px solid rgb(235, 235, 235);
  cursor: pointer;
  .index {
    font-weight: 500;
    font-size: 18px;
    color: rgb(233, 34, 34);
  }
  .title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
  }
  .num {
    text-align: right;
  }

  .icon-remen {
    color: rgb(238, 48, 48);
  }
}
</style>